<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {ref, watch, onBeforeMount, nextTick} from 'vue'
import {dictKeyToSelect, dictKeyToValue} from '@/common/dict.ts'

const props = defineProps({
    tableData: {
        type: Array,
        required: true
    },
    tableConfig: {
        type: Object,
        required: true
    },
    dict: {
        type: Object,
        required: false,
        default: {
            dictIndex: [],
            dictList: []
        }
    }
})

let serchForm = ref({})
let locale = ref(zhCn)
let showTable = ref(true) //用于组件element组件bug，修改属性后无法刷新

onBeforeMount(async () => {
    // console.log(tableData)
    // 添加搜索字段
    let tmpSearchForm = {}
    if (props.tableConfig.searchList) {
        props.tableConfig.searchList.map(item => {
            tmpSearchForm[item.key] = ''
        })
    }
    serchForm.value = tmpSearchForm
})
/**
 * 字典值转HTML
 * @param key 查询的字典值
 * @param value 字典值
 */
const toDictValue = (dictKey, value) => {
    return dictKeyToValue(dictKey, value, props.dict.dictIndex, props.dict.dictList)
}
const toDictSelect = (dictKey) => {
    return dictKeyToSelect(dictKey, props.dict.dictIndex, props.dict.dictList)
}
/**
 * 事件调度中心
 * @param eventName:string 事件名称
 * @param value:object 事件值
 */
const emit = defineEmits(['doit'])
const doit = (eventName: string, value = {}) => {
    emit('doit', {
        eventName: eventName,
        value: value
    })
}
//用于组件element组件bug，修改属性后无法刷新
watch(props.tableConfig, () => {
    showTable.value = false
    nextTick(() => {
        showTable.value = true
    })
}, {deep: true})

//重置
const init = () => {
    for (let i in serchForm.value) {
        serchForm.value[i] = ""
    }
    doit('refresh')
}

//如果存在子节点是否显示这个按钮
const atChildrenIfDisplay = (item, row) =>{
  if(item.childrenDisplay && row.hasOwnProperty('children')){
    return false
  }else{
    return true
  }
}
//表格复选框设置
const handleSelectionChange = (e) =>{
    doit('selectionChange',e)
}
const handleSizeChange = (e) => {
    doit('handleSizeChange',e)
}
const handleCurrentChange = (e) => {
    doit('handleCurrentChange',e)
}
</script>
<template>
    <div>
        <div class="wos-flex wos-flex-row wos-flex-between" >
            <div class="wos-flex wos-flex-row" v-if="tableConfig.buttonList&&tableConfig.buttonList.length">
                <div class="padding-right-10" v-for="(item, index) in tableConfig.buttonList" :key="index">
                    <el-button
                        :type="item.type"
                        :plain="!!item.plain"
                        :round="!!item.round"
                        :icon="item.icon||''"
                        :disabled="item.disabled"
                        @click="doit(item.emitLabel)"
                        v-power="item.power"
                    >
                        {{ item.name }}
                    </el-button>
                </div>
            </div>
            <div class="wos-flex wos-flex-row wos-flex-nowarp"

                 v-if="tableConfig.searchList&&tableConfig.searchList.length">
                <div class="wos-flex wos-flex-row padding-right-10" v-for="(item,index) in tableConfig.searchList"
                     :key="index">
                    <!--文本框-->
                    <el-input v-if="item.type === 'text'" @keyup.enter.native="doit('search', serchForm)" :placeholder="item.placeholder" v-model="serchForm[item.key]">
                        <template #prepend>{{ item.label }}</template>
                    </el-input>
                    <!--下拉选择框-->
                    <el-select v-if="item.type === 'select'" v-model="serchForm[item.key]"
                               :placeholder="item.placeholder">
                        <el-option
                                v-if="item.source === 'select'"
                                v-for="option in item.select"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                        />
                        <el-option
                                v-else
                                v-for="option in toDictSelect(item.dict)"
                                :key="option['dictValue']"
                                :label="option['dictLabel']"
                                :value="option['dictValue']"
                        />
                    </el-select>
                    <!--时间选择器-->

                  <el-date-picker
                      v-if="item.type === 'date'"
                      v-model="serchForm[item.key]"
                      type="daterange"
                      range-separator="To"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                  />
                </div>
                <el-button type="primary" @click="doit('search', serchForm)">搜索</el-button>
                <el-button type="default" @click="init">重置</el-button>
            </div>
        </div>

        <el-table class="padding-top-20 padding-bottom-20" highlight-current-row v-if="showTable"
                  :row-key="tableConfig.rowKey" fit
                  :default-expand-all="tableConfig.defaultExpandAll" :data="tableData" border style="width: 100%"
                  empty-text="暂无数据"
                  @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" v-if="tableConfig.selectionChange" />
<!--数据展示-->
            <el-table-column v-for="(item, index) in tableConfig.tableList" :key="index" :prop="item.key"
                             :label="item.label" :width="item.width||tableConfig.defaultColumnWidth">
                <template #default="scope">
                  <span v-if="item.link" @click="doit(item.emitLabel, scope.row)" class="primary-link-text">
                    {{item.prefix}}{{ scope.row[item.key] }}{{item.suffix}}
                  </span>
                  <span v-else-if="item.dicKey" v-html="toDictValue(item.dicKey, scope.row[item.key])"></span>
                  <span v-else-if="item.css">
                    <el-tag v-if="scope.row[item.css]" :type="scope.row[item.css]" plain>{{item.prefix}}{{ scope.row[item.key] }}{{item.suffix}}</el-tag>
                    <span v-else> {{item.prefix}}{{ scope.row[item.key] }}{{item.suffix}} </span>
                  </span>
                  <span v-else>
                    <span v-if="item.childKey">{{item.prefix}}{{ scope.row[item.key][item.childKey] }}{{item.suffix}}</span>
                    <span v-else>{{item.prefix}}{{ scope.row[item.key] }}{{item.suffix}}</span>
                  </span>
                </template>
            </el-table-column>

            <el-table-column v-if="tableConfig.tableButton" :label="tableConfig.tableButton.name">
                <template #default="scope">
                    <div class="wos-flex wos-flex-row">
                      <div class="wos-padding-right-10" v-for="(item, index) in tableConfig.tableButton.list" :key="index">
                        <el-button v-power="item.power? item.power : ''"
                                   link
                                   :type="item.type"
                                   v-if="atChildrenIfDisplay(item, scope.row)"
                                   size="small"
                                   @click="doit(item.emitLabel, scope.row)">
                          {{ item.name }}
                        </el-button>
                      </div>

                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="wos-flex wos-flex-row wos-flex-between">
            <div class="wos-flex wos-flex-row">
                <div v-if="tableConfig.pagingShow">
                    <span>本页</span>
                    <span v-if="tableConfig.pageNum&&!tableData.length">&nbsp;0 - 0</span>
                    <span v-else>&nbsp;{{
                        (tableConfig.pageNum - 1) * tableConfig.pageSize + 1
                        }} - {{ (tableConfig.pageNum - 1) * tableConfig.pageSize + tableData.length }}</span>
                </div>
                <span v-if="tableConfig.totalShow">
                    <span>&nbsp;&nbsp;共</span>
                    <span>&nbsp;{{ tableConfig.total }} 条数据</span>
                </span>
            </div>
            <el-config-provider :locale="locale" v-if="tableConfig.paginationShow">
                <el-pagination
                        v-model:current-page="tableConfig.pageNum"
                        v-model:page-size="tableConfig.pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        background
                        layout="sizes, prev, pager, next, jumper"
                        :total="tableConfig.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </el-config-provider>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>